<template>
    <div class="shelfbox">
        <div class="title">
            <h2>这是{{ mes }}</h2>
        </div>
        <!--内容 显示2行4列-->
        <div class="box">
            <div class="mbox" v-for="good in content" :key="good.cid">
                <!-- 图片 -->
                <div class="photo">
                    <img :src="good.cpicture - url" alt="" />
                </div>
                <!-- 名称 -->
                <div class="name">
                    {{ good.cname }}
                </div>
                <!-- 描述 -->
                <div class="ps">
                    {{ good.cdescription }}
                </div>
                <!-- 价格 -->
                <div class="good-price">
                    <div class="ds">
                        <a>
                            <button class="gooddetail" style="margin: 0 5px ">
                                查看详情
                            </button>
                        </a>
                        <button
                            class="goodaddcart"
                            style="margin: 0 5px"
                            classStyle="main-btn"
                        >
                            会员租借
                        </button>
                    </div>
                    <p>
                        <span style="font-size: 14px">￥</span>{{ good.cprice }}
                    </p>
                </div>
            </div>
        </div>

        <div style="display: flex;justify-content: flex-end">
            <span class="demonstration">显示总数</span>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="page"
                layout="total, prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            page: 1,
            total: 10,
            size: 12,
            content: [],
            loading: false,
            mes: "",
            cf: "",
        };
    },
    watch: {
        $route: {
            handler: function() {
                this.initgoods();
            },
            deep: true,
        },
    },
    beforeRouteUpdate(to, from, next) {
        this.getmes(to.query.cf);
        next();
    },
    mounted() {
        this.initgoods();
        console.log(this.cf);
    },
    methods: {
        handleSizeChange(currentSize) {
            this.size = currentSize;
            this.initgoods();
        },
        handleCurrentChange(currentPage) {
            this.page = currentPage;
            this.initgoods();
        },

        initgoods() {
            console.log("我进来了");
            this.loading = true;
            // 获取url的参数
            // console.log(this.$route.query);
            let a = this.$route.query.cf;
            this.cf = a;
            console.log(this.cf);

            // 获取mes
            this.getmes(this.cf);
            console.log(this.mes);

            // 接口
            let url =
                "http://localhost:8081/comm/comms?currentPage=" +
                this.page +
                "&pageSize=" +
                this.size +
                "&pagecf=" +
                this.cf;
            this.$axios.get(url).then((res) => {
                if (res) {
                    this.content = res.data.content;
                    this.total = res.data.total;
                    console.log(res);
                }
            });
            this.loading = false;
        },
        isNoLogin() {
            if (localStorage.getItem("token") == null) {
                window.location.href = "http://localhost:8080/login";
            } else {
                console.log("报错");
            }
        },
        getmes(a) {
            if (a == 1) {
                this.mes = "裤子";
            }
            if (a == 2) {
                this.mes = "衣服";
            }
            if (a == 3) {
                this.mes = "帽子";
            }
            if (a == 4) {
                this.mes = "包包";
            }
            if (a == 0) {
                this.mes = "鞋子";
            }
        },
    },
    props: ["title"],
    components: {},
};
</script>
<style lang="scss" scoped>
.shelfbox {
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 3px 8px -6px rgba(0, 0, 0, 0.1);
    .title {
        padding-left: 30px;
        position: relative;
        z-index: 10;
        height: 60px;
        padding: 0 10px 0 24px;
        border-bottom: 1px solid #d4d4d4;
        border-radius: 8px 8px 0 0;
        box-shadow: rgba(0, 0, 0, 0.06) 0 1px 7px;
        background: #f3f3f3;
        background: -webkit-linear-gradient(#fbfbfb, #ececec);
        background: linear-gradient(#fbfbfb, #ececec);
        line-height: 60px;
        font-size: 18px;
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        h2 {
            font-size: 18px;
            font-weight: 400;
            color: #626262;
            display: inline-block;
        }
    }
}
.box {
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    justify-content: left;
    .mbox {
        width: 25%;
        height: 430px;
        display: flex;
        flex-flow: column;
        justify-content: center;
        &:hover {
            transform: translateY(-3px);
            box-shadow: 1px 1px 20px #999;
            .good-price p {
                display: none;
            }
            .good-price .ds {
                display: block;
            }
        }
        .photo {
            background-color: white;
            display: flex;
            justify-content: center;
            img {
                width: 206px;
                height: 206px;
            }
        }
        .name {
            line-height: 2.5;
            font-family: "Times New Roman", Times, serif;
            font-size: 20px;
            color: #424242;
            text-align: center;
            overflow: hidden;
            font-weight: 400;
        }
        .ps {
            line-height: 1.2;
            font-size: 16px;
            text-align: center;
            color: #d0d0d0;
            padding: 10px;
        }
        .good-price {
            margin: 15px 0;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #d44d44;
            font-family: Arial;
            font-size: 18px;
            font-weight: 700;
            .ds {
                width: 100%;
                display: none;
                .gooddetail {
                    margin: 0 5px;
                    border-radius: 5px;
                    border: 1px solid #e1e1e1;
                    height: 30px;
                    color: #646464;
                    background-color: #eee;
                    background-image: linear-gradient(180deg, #f5f5f5, #eee);
                    font-size: 12px;
                }
                .goodaddcart {
                    margin: 0 5px;
                    border-radius: 5px;
                    border: 1px solid #5c81e3;
                    height: 30px;
                    background-color: #6c8cd4;
                    background-image: linear-gradient(180deg, #6c8cd4, #4769c2);
                    font-size: 12px;
                    color: #fff;
                }
            }
        }
    }
}
</style>
